<template>
  <div :class="prefixCls" class="iconSelector">
    <a-input v-model="selectedIcon">
      <a-icon slot="suffix" type="appstore" class="more acea-row row-center-wrapper" @click="showModal"/>
    </a-input>
    <a-modal title="选择图标" :visible="show" @cancel="hideModal" >
      <a-tabs v-model="currentTab" @change="handleTabChange">
        <a-tab-pane v-for="v in icons" :tab="v.title" :key="v.key">
          <ul class="iconList acea-row">
            <li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`" :class="{ 'active': selectedIcon==icon }" @click="handleSelectedIcon(icon)" >
              <a-icon :type="icon" :style="{ fontSize: '30px' }" />
            </li>
          </ul>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import icons from './icons'

export default {
  name: 'IconSelect',
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-icon-selector'
    },
    // eslint-disable-next-line
    value: {
      type: String
    }
  },
  data () {
    return {
      selectedIcon: this.value || '',
      currentTab: 'directional',
      icons,
      show:false
    }
  },
  watch: {
    value (val) {
      this.selectedIcon = val
      this.autoSwitchTab()
    },
    selectedIcon(val){
      this.$emit('change', val)
    }
  },
  created () {
    if (this.value) {
      this.autoSwitchTab()
    }
  },
  methods: {
    showModal:function(){
      this.show = true
    },
    hideModal:function (){
      this.show = false
    },
    handleSelectedIcon (icon) {
      this.selectedIcon = icon
      this.$emit('change', icon)
      this.hideModal()
    },
    handleTabChange (activeKey) {
      this.currentTab = activeKey
    },
    autoSwitchTab () {
      icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
    }
  }
}
</script>

<style scoped>
  .iconSelector .more{
    height: 30px;
  }
  .iconList{
    list-style: none;
    padding: 0;
    overflow-y: auto;
    max-height: 300px;
  }
  .iconList li{
    display: inline-block;
    padding: 10px
  }
  .iconList li:hover{
    cursor: pointer;
    color: #ffffff;
    background-color: #1890ff;
    border-radius: 5px;
  }
  .iconList .active{
    cursor: pointer;
    color: #ffffff;
    background-color: #1890ff;
    border-radius: 5px;
  }
</style>